window.onload = function () {

    var olielem = document.getElementById('tap_ul');
    var lielem = olielem.getElementsByTagName('li');
    var divelem = document.getElementsByName('i_card');

    for(var i = 0; i < lielem.length; i++){
        lielem[i].index = i;
        lielem[i].onclick = function() {
            for(var i = 0; i < lielem.length; i++) {
                lielem[i].className = "";
            }
            for(var j = 0; j < divelem.length; j++) {
                divelem[j].className = "hide";
            }
            divelem[this.index].className = "i_imgbox";
        }
    }
}

// 显示大图
function openviewbox(e){
    var img =document.getElementById(e).src;
    document.getElementById("0_2").src=img;
    document.getElementById("gallery-big-box").style.display = 'block';
}
function closeviewbox() {
    document.getElementById("gallery-big-box").style.display ='none';
}

// 打开
function openUl() {
    document.getElementById('tap_ul').style.display = 'block';
}

// jq 显示影藏,检测窗口大小,bom 达到js/jq 媒体查询的目的.

// 此方法兼容性不好,屏幕监控不好
// $(window).resize(function(){
//     if($(window).width <= 600){
//         $(document).ready(function () {
//             $("#img_click").click(function () {
//                 $("#tap_ul").toggle();
//             })
//         })
//     }
// })

// 该方法做媒体查询只会在页面刷新时起作用,而无法实时监听屏幕宽度改变.
var resou = window.matchMedia('(max-width:600px)');

    if (resou.matches){
        $(document).ready(function () {
            $("#img_click").click(function () {
                $("#tap_ul").toggle();
            })
        })

        // 设置联动,点击任意li隐藏ul功能.
        $(document).ready(function(){
            $("li").click(function () {
                $("#tap_ul").toggle();
            })
        });
    }









